<template>
  <div class="tab">
    <ul>
        <li v-for="(item,index) in list" :key="index" :class="{active:checkIndex == index}" @click="cut(index)">{{item}}</li>
    </ul>
    <div>欢迎进入{{list[checkIndex]}}专区</div>
    <!-- <div>{{store.state.num}}</div> -->
  </div>
</template>
<script>
import { ref, reactive, toRefs } from 'vue';
// import { useStore } from 'vuex';
export default {
  setup() {
    // const store = useStore();
    const data = reactive({
      list: ['童装','女装','男装','手机']
    })

    const checkIndex = ref(0);

    const cut = (i) => { // 切换函数
      checkIndex.value = i;
    }

    return {
      ...toRefs(data),
      checkIndex,
      cut,
      store
    }
  }
}
</script>
<style lang="scss" scoped>
ul{
  list-style: none;
  display: flex;
  li{ 
    width: 140px;
    text-align: center;
  }
  .active{
    color: red;
  }
}
</style>

